<template>
  <div class="add-dialog">
    <el-form ref="form" :model="formData" label-width="80px">
      <el-form-item label="轮播图" required>
        <el-upload 
          :action="uploadUrl"
          :headers="customHeaders"
          list-type="picture-card"
          :file-list="state.fileList1"
          :on-preview="handlePictureCardPreview"
          :on-success="handleProgress"
          :on-remove="handleRemove"
          multiple>
          <el-icon><Plus/></el-icon>
        </el-upload>
        <el-dialog v-model="state.dialogVisible">
          <img width="100%" :src="state.dialogImg" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="资讯标题" required>
        <el-input v-model="formData.title" type="textarea" maxlength="30" show-word-limit placeholder="请输入资讯标题"></el-input>
      </el-form-item>
      <el-form-item label="资讯内容" required> 
        <el-input v-model="formData.body" placeholder="请输入资讯内容" rows="7" type="textarea" maxlength="10000" show-word-limit></el-input>
      </el-form-item>
    </el-form>
    <div class="add-dialog-submit">
      <el-button @click="onSubmit(0)">取消</el-button>
      <el-button type="primary" @click="onSubmit(1)">确认</el-button>
    </div>
  </div>
</template>

<script setup>
  import { ref,reactive,onMounted,computed,watch } from 'vue';
  import API from "@/utils/api";
  import { defineProps, defineEmits } from 'vue';
  import { serverUrl ,uploadUrl} from '@/utils/const'
  import {Plus } from "@element-plus/icons-vue";
  import { ElMessage,ElMessageBox } from 'element-plus';
  const emits = defineEmits(['closeNewsDialog']);
  const props = defineProps({
    parmas: Object,
  });
  computed(() => {
    return uploadUrl
  })
  const customHeaders = ref({
  'token-admin': localStorage.getItem('token'),
});
  const formData = reactive({
    title:null,
    body:null,
    images:'',
  })
  const state = reactive({
    dialogVisible: false,
    fileList:[],
    fileList1:[],
    dialogImg:'',
  })
  const handleProgress = ((file, fileList) => {
    state.fileList.push(file.data[0])
  })
  const handleRemove = ((file, fileList) => {
    // console.log(fileList,'fileList');
    // const list = fileList
    const finalList = []
    fileList.forEach(item => {
      if(item.response) {
        finalList.push(item.response.data[0])
      }else {
        finalList.push(item.url)
      }
    });
    state.fileList = finalList
  })
  const handlePictureCardPreview = ((file, fileList) => {
    state.dialogVisible = true
    state.dialogImg = file.response.data[0]
  })
  const onSubmit = ((type) => {
    if(type === 0) return emits('closeNewsDialog',type);
    let message = state.fileList.length < 1 && '请上传资讯轮播图' || !formData.title && '请输入资讯标题' || !formData.body && '请输入资讯内容' || null;
    if(message) return ElMessage.warning(message);
    formData.images = state.fileList.join(',');
    if(props.parmas.type === 'add'){  //新增
      API.newsList.addNews(formData,res => {
        if(res.code == 0){
          ElMessage.success('添加成功');
          emits('closeNewsDialog',true);
        }else{
          ElMessage.warning(res.msg);
        }
      })
    }else{  //编辑
      API.newsList.editNews(formData,res => {
        if(res.code == 0){
          ElMessage.success('修改成功');
          emits('closeNewsDialog',true);
        }else{
          ElMessage.warning(res.msg);
        }
      })
    }
  })
  onMounted(() => {
    if(props.parmas.type == 'update'){
      formData.title = props.parmas.rowInfo.title;
      formData.body = props.parmas.rowInfo.body;
      formData.id = props.parmas.rowInfo.id;
      if(props.parmas.rowInfo.images.length > 0) {
        props.parmas.rowInfo.images.forEach(item => {
          state.fileList1.push({name:1,url:item})
        })
        state.fileList = props.parmas.rowInfo.images
      }
    }
  })
</script>

<style>
.el-upload {
  width: 100px;
  height: 100px;
}
.el-upload-list__item {
  width: 100px !important;
  height: 100px !important;
}
</style>
<style lang="scss" scoped>
.add-dialog {
  .add-dialog-submit {
    margin-top: 30px;
  }
  .add-dialog-checkox {
    max-height: 250px;
    overflow: auto;
    text-align: start;
    padding: 10px;
  }
}
</style>